<template>
  <div id="search">
    <search-nav-bar />
    <scroll class="scroll">
      <search-frame @handleSearchSubmit="handleSearchSubmit" />
      <search-nearby-list
        :nearby-shops="nearbyShops"
        @handleClickSearchHistory="handleClickSearchHistory"
      />
    </scroll>
  </div>
</template>

<script>
import Scroll from "components/common/betterScroll/Scroll";

import SearchNavBar from "./childComps/SearchNavBar";
import SearchFrame from "./childComps/SearchFrame";
import SearchNearbyList from "./childComps/SearchNearbyList";

import { getSearch } from "network/search";

import { mapGetters } from "vuex";
export default {
  data() {
    return {
      nearbyShops: [],
    };
  },
  computed: {
    ...mapGetters(["geohash"]),
  },
  methods: {
    getSearch(geohash, keyword) {
      getSearch(geohash, keyword).then((res) => {
        res.message
          ? this.$toast.handleTipsText(res.message)
          : (this.nearbyShops = res);
      });
    },

    handleSearchSubmit(keywords) {
      this.getSearch(this.geohash, keywords);
    },
    handleClickSearchHistory(item) {
      this.getSearch(this.geohash, item);
    },
  },
  components: {
    Scroll,
    SearchNavBar,
    SearchFrame,
    SearchNearbyList,
  },
};
</script>
<style lang="less" scoped>
#search {
  height: 100vh;
  background-color: #f5f5f5;
  .scroll {
    height: calc(100% - 44px - 49px);
    overflow: hidden;
  }
}
</style>e